import React, {Component} from 'react'
import {Button, Col, Form, Input, Radio, Row, Space, Switch, Table} from 'antd'
import {PlusOutlined} from '@ant-design/icons'
import PaginationComponent from '../common/paginationComponent'

class RoleManagement extends Component {
    state = {
        pageNumber: 1,
        pageSize: 10,
        totalRow: 0,
        dataSource: [],
        roleId: '',
        modelVisible: false,
        modalTitle: '',
        treeData: [],
        checkedKeys: [],
        childNodes: []
    }

    componentDidMount() {
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
        }
    }

    /*获取角色列表*/
    getRoleList = () => {
    }


 


    /*分页操作事件*/
    pageChangeHandle = (pageNumber, pageSize) => {
        this.setState({pageNumber, pageSize}, () => {
            this.getRoleList();
        });
    }

    /*重置查询条件*/
    resetFormHandle = () => {
        this.refs.filterRef.resetFields();
        this.getRoleList();
    }

    /*添加角色*/
    addRoleHandle = () => {;
    }

    /*修改角色*/
    editRoleHandle = item => {
    }

    /*角色权限设置*/
    permissionRoleHandle = item => {
    }

    /*删除角色*/
    deleteRoleHandle = item => {
    }


    /*启用禁用角色*/
    switchHandle = (item, val) => {
    }


    render() {
        const {
            pageNumber, pageSize, totalRow, dataSource,  } = this.state;
        const pageProps = {
            pageNumber, pageSize, totalRow, pageChangeHandle: this.pageChangeHandle
        }
        const columns = [
            {title: '序号', dataIndex: 'key', key: 'key', align: 'center'},
            {title: '用户角色', dataIndex: 'name', key: 'name', align: 'center'},
            {title: '创建时间', dataIndex: 'createTime', key: 'createTime', align: 'center'},
            {
                title: '启用状态', dataIndex: 'enableStatus', key: 'enableStatus', align: 'center',
                render: (text, record) => {
                    return <Switch checkedChildren="启用" unCheckedChildren="禁用" checked={text === '1'}
                                   onClick={this.switchHandle.bind(this, record)}/>
                }
            },
            {
                title: '操作', dataIndex: 'operate', key: 'operate', align: 'center', width: 230,
                render: (text, record) => {
                    return <div className="operate_link_group">
                        <span className="audit_link" onClick={this.permissionRoleHandle.bind(this, record)}>权限</span>
                        <span className="edit_link" onClick={this.editRoleHandle.bind(this, record)}>编辑</span>
                        <span className="del_link" onClick={this.deleteRoleHandle.bind(this, record)}>删除</span>
                    </div>
                }
            }
        ]
        const tableProps = {
            dataSource,
            columns,
            pagination: false
        }
      
        
        return (
            <>
                <div className="system_management_content_style animate__animated animate__fadeIn">
                    <Row className="filter_section">
                        <Col span={2} className="animate__animated animate__fadeInLeft">
                            <span className="filter_label">条件查询</span>
                        </Col>
                        <Col span={22} className="filter_search">
                            <Row className="custom_filter_form_style">
                                <Col span={18} className="animate__animated animate__fadeInDown">
                                    <Form ref="filterRef" layout="inline" autoComplete="off"
                                          initialValues={{name: '', enableStatus: ''}}>
                                        <Form.Item label="角色名称" name="name">
                                            <Input placeholder="角色名称" autocomplate="off"/>
                                        </Form.Item>
                                        <Form.Item label="状态" name="enableStatus">
                                            <Radio.Group>
                                                <Radio value={0}>禁用</Radio>
                                                <Radio value={1}>启用</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                    </Form>
                                </Col>
                                <Col span={6} className="clearFix animate__animated animate__fadeInRight">
                                    <Space size={30} className="float-right">
                                        <Button type="primary" className="custom_button_style search_result"
                                                onClick={this.getRoleList}>搜索</Button>
                                        <Button type="primary" className="custom_button_style"
                                                onClick={this.resetFormHandle}>重置</Button>
                                    </Space>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row className="filter_section">
                        <Col span={16} className="animate__animated animate__fadeInLeft">
                            <span className="filter_label">角色列表</span>
                        </Col>
                        <Col span={8} className="clearFix animate__animated animate__fadeInRight">
                            <Space size={30} className="float-right">
                                <Button type="primary" className="custom_button_style remove_all auto_width"
                                        icon={<PlusOutlined/>} onClick={this.addRoleHandle}>新建角色</Button>
                            </Space>
                        </Col>
                    </Row>
                    <div className="table_box animateFadeInUp">
                        <Table className="custom_table_style" {...tableProps}/>
                        <PaginationComponent {...pageProps}/>
                    </div>
                </div>
            </>
        )
    }
}

export default RoleManagement